<template>
  <div>
    <el-dialog :title='option.title' :visible.sync='isShow' @close="closeUser" width="890px" @open="openCreate"
      :close-on-click-modal="false" center>
      <div v-loading="loading">
        <div class="content">
          <el-card>
            <el-form size="mini" ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="PARAMNAME" label="监控因子名称">
                    <el-input v-model="form.PARAMNAME" placeholder="请输入监控因子名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="PARAMTYPE" label="监控因子类型">
                    <el-select v-model="form.PARAMTYPE" filterable placeholder="请选择监控因子类型">
                      <el-option v-for="item in option.STATICOBJECTLIST" :key="item.value" :label="item.name"
                        :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
               <el-col :span="12">
                  <el-form-item prop="PARAMKEY" label="监控因子KEY">
                    <el-input v-model="form.PARAMKEY" placeholder="请输入监控因子KEY"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="STATUS" label="状态">
                    <el-select v-model="form.STATUS" filterable placeholder="请选择状态">
                      <el-option v-for="item in option.STATUSLIST" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="12" v-if="this.option.log=='2'">
                  <el-form-item prop="STATUS" label="有效状态：">
                    <el-select v-model="form.STATUS" filterable placeholder="请选择有效状态">
                      <el-option v-for="item in STATUSLIST" :key="item.value" :label="item.name" :value="item.value"
                        :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col> -->
                <el-col :span="22">
                  <el-form-item prop="REMARK" label="备注：">
                    <el-input v-model="form.REMARK" type="textarea" :rows="2" placeholder="请输入备注"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click='addType'>取消</el-button>
            <el-button type="primary" size="mini" @click="add">确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import query from "@/message/paramManagement/factorToMaintain/queryfactorToMaintain";
  // import Update from "@/message/paramManagement/realTimeMonitorParamSetting/update";
  // import request1 from "@/common/utils/requestTest";
  import requestYg from "@/common/utils/requestYg";
  import toolBox from "@/common/utils/toolBox";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  export default {
    name: "",
    data() {
      return {
        loading: false,
        CHACEFLAGLIST: [{
            name: "是",
            value: "1"
          },
          {
            name: "否",
            value: "0"
          },
        ],
        STATUSLIST: [{
            name: "有效",
            value: "1"
          },
          {
            name: "无效",
            value: "0"
          },


        ],
        form: {
          PARAMTYPE: "",
          PARAMNAME: "",
          PARAMKEY: '',
          STATUS: '',
          REMARK: '',
        },
        rules: {
          PARAMTYPE: [{
            required: true,
            message: "请选择监控因子类型",
            trigger: "blur"
          }],
          STATUS: [{
            required: true,
            message: "请选择状态",
            trigger: "change"
          }],
          PARAMNAME: [{
            required: true,
            message: "请输入监控因子名称",
            trigger: "blur"
          }],
          PARAMKEY: [{
            required: true,
            message: "请输入监控因子KEY",
            trigger: "blur"
          }]
        }
      };
    },
    props: {
      //父元素传递的数据
      option: Object
    },
    components: {},
    computed: {
      isShow: {
        //创建用户弹窗是否显示
        get: function () {
          return this.option.isShow;
        },
        set: function (newValue) {
          this.option.isShow = newValue;
        }
      }
    },
    created: function () {

    },
    watch: {},
    methods: {
      add() {
        //添加
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.loading = true;
            let resBody = new query() 
            resBody.data.OPERFLAG = this.option.log == '1' ? 'I' : 'U';
            if (this.option.log == "2") {
              resBody.data.ID = this.option.currentRow.ID;
            }
            resBody.data.STATUS = this.form.STATUS;
            resBody.data.PARAMTYPE = this.form.PARAMTYPE;
            resBody.data.PARAMKEY = this.form.PARAMKEY;
            resBody.data.PARAMNAME = this.form.PARAMNAME
            resBody.data.REMARK = this.form.REMARK;
            requestYg(resBody)
              .then(response => {
                if (response.SYS_HEAD.ReturnCode === "000000") {
                  let mes = this.option.log == "1" ? "新增" : "修改";
                  this.$message({
                    type: "success",
                    message: `监控KEY${mes}${response.SYS_HEAD.ReturnMessage}!`
                  });
                  this.isShow = false;
                  this.$emit("refreshTable");
                } else {
                  this.$message({
                    type: "error",
                    message: `${response.SYS_HEAD.ReturnMessage}!`
                  });
                }
                this.loading = false;
              })
              .catch(error => {
                this.loading = false;
              });
            this.$refs.form.clearValidate(); //清楚表单验证
            this.$refs.form.resetFields();
          } else {
            this.$message({
              type: "warning",
              message: "新增 监控KEY请输入合法的数据！"
            });
            return false;
          }
        });
      },



      openCreate() {
        //打开弹窗事件
        this.$nextTick(function () {
          if (this.option.log == "2") {
            this.updateDate();
          } else {}
        })
      },
      updateDate() {
        this.form.PARAMTYPE = this.option.currentRow.PARAMTYPE;
        this.form.PARAMNAME = this.option.currentRow.PARAMNAME;
        this.form.PARAMKEY = this.option.currentRow.PARAMKEY;
        this.form.STATUS = this.option.currentRow.STATUS;
        //  this.form.MONIKEY = this.option.currentRow.MONIKEY	;
        this.form.REMARK = this.option.currentRow.REMARK;
        // this.form.FILTER = this.option.currentRow.FILTER;

      },
      closeUser() {
        //关闭弹窗清楚表单数据并清楚表单验证
        // 重置表单数据
        this.$refs.form.clearValidate(); //清楚表单验证
        this.$refs.form.resetFields();
        this.$emit("refreshTable");
      },
      addType() { //关闭弹窗事件，清楚表单验证
        this.option.isShow = false;
        this.$refs.form.clearValidate();
        this.$refs.form.resetFields();
      },
    },
  };

</script>
<style lang="scss" scoped>
  .content {
    display: flex;
    flex-direction: column;
  }

  .require {
    color: red;
  }

  .dialog-text {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: red;
    font-size: 18px;
  }

  .role {
    width: 95%;
    border: 1px solid #eee;
    border-radius: 4px;
    height: 290px;

    .roleHeader {
      color: #606266;
      font-weight: 500;
      font-size: 14px;
      background: #f5f7fa;
      height: 42px;
      box-sizing: border-box;
      padding: 9px;
      overflow-y: auto;
    }
  }

  .el-card {
    overflow: inherit;
  }

</style>
